<div class="container p-4 h-100">
    <div class="text-center">
        <img id="profile-avatar" src="{{session.avatar}}" width="80px" height="80px" class="rounded-circle mb-2" data-toggle="modal" data-target="#mdl-mod-avatar">
        <div id="profile-name">
            {% if config.app.enable_rename == 'yes' then %}
            <h3>{{session.name}}<sup><i class="fa fa-pencil-square-o ml-1 btn-link" onclick="return open_edit_name();"></i></sup></h3>
            {% else %}
            <h3>{{session.name}}</h3>
            {% end %}
        </div>
        
        <p class="text-muted">{{session.account}}</p>
        <button type="button" class="btn btn-primary mt-4" data-toggle="modal" data-target="#mdl-mod-pswd">修改密码</button><br>
        <a href="/user/logout/" class="btn btn-default mt-2">退出登录</a>

        <a class="navbar-popup-close text-center text-muted" onclick="return navbar_popup_close();"><i class="fa fa-close"></i></a>
    </div>
</div>

<!-- 修改密码 -->
<div id="mdl-mod-pswd" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改密码</h5>
            </div>
            <div class="modal-body">
                <div id="err"></div>
                <form id="form-mod-pswd">
                    <div class="form-group">
                        <input name="org_pswd" type="password" class="form-control" placeholder="原始密码" required autofocus>
                    </div>
                    <div class="form-group">
                        <input name="new_pswd" type="password" class="form-control" placeholder="新密码" required>
                    </div>
                    <div class="form-group">
                        <input name="cfm_pswd" type="password" class="form-control" placeholder="确认新密码" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="return mod_pswd();">确  定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
            </div>
        </div>
    </div>
</div>

<!-- 上传头像 -->
<div id="mdl-mod-avatar" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">上传新头像</h5>
            </div>
            <div class="modal-body">
                <div id="err"></div>
                <form id="form-mod-avatar">
                    <div class="form-group">
                        <label for="img">选择头像文件</label>
                        <input id="img" name="img" type="file" class="form-control" accept="image/*" required autofocus>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="return mod_avatar();">确  定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
            </div>
        </div>
    </div>
</div>

<script>
$('.navbar-popup .modal').on('shown.bs.modal', function(e) {
    var mask = $('.modal-backdrop').detach();
    mask.appendTo('.navbar-popup');
});

function open_edit_name() {
    var org = $('#profile-name h3');
    var name = org.text();
    var input = $('<input type="text" class="form-control">');

    input.val(name);
    input.keydown(function(ev) {
        if (ev.keyCode == 13) {
            mod_user_name($(this).val(), name);
        } else if (ev.keyCode == 27) {
            $('#profile-name').empty();
            $('#profile-name').append(org);
        }
    });

    $('#profile-name').empty();
    $('#profile-name').append(input);
    input.focus();
}

function mod_user_name(name, org) {
    $.post('/user/profile/set_name', {name: name}, function(ret) {
        var display = org;

        if (ret.ok) {
            display = name;
            $('#navbar-name').text(name);
        }

        $('#profile-name').empty();
        $('#profile-name').append('<h3>' + name + '<sup><i class="fa fa-pencil-square-o ml-1 btn-link" onclick="return open_edit_name();"></i></sup></h3>');
    });
}

function mod_avatar() {
    $.ajax({
        url: '/user/profile/set_avatar',
        type: 'POST',
        data: new FormData(document.getElementById('form-mod-avatar')),
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        success: function(ret) {
            if (!ret || !ret.ok) return;
            $('#profile-avatar').attr('src', ret.url);
            $('#navbar-avatar').attr('src', ret.url);
        }
    });
    
    $('.model #err').empty();
    $('.modal').modal('hide');
}

function mod_pswd() {
    $.ajax({
        url: '/user/profile/set_pswd',
        type: 'POST',
        data: new FormData(document.getElementById('form-mod-pswd')),
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        success: function(ret) {
            if (!ret.ok) {
                show_error('#mdl-mod-pswd #err', '更改密码失败', ret.err_msg);
            } else {
                $('.model #err').empty();
                $('.modal').modal('hide');
            }
        }
    });
}
</script>